import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_taotaoshipin/pages/drama/category/drama_category_state.dart';
import 'package:flutter_taotaoshipin/pages/drama/drama_routes.dart';
import 'package:flutter_taotaoshipin/widget/load_image.dart';
import 'package:flutter_taotaoshipin/widget/refresh_footer.dart';
import 'package:flutter_taotaoshipin/widget/refresh_header.dart';
import 'package:flutter_taotaoshipin/widget/refresh_status_view.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'drama_category_controller.dart';

class DramaCategoryPage extends StatefulWidget {
  const DramaCategoryPage({Key? key, this.categoryId = 0}) : super(key: key);

  final int categoryId;

  @override
  State<DramaCategoryPage> createState() => _DramaCategoryPageState();
}

class _DramaCategoryPageState extends State<DramaCategoryPage> {
  late DramaCategoryController controller;
  late DramaCategoryState state;

  @override
  void initState() {
    controller = Get.put(
      DramaCategoryController(categoryId: widget.categoryId),
      tag: widget.categoryId.toString(),
    );
    state = controller.state;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RefreshStatusView(
      controller: controller,
      tag: widget.categoryId.toString(),
      contentBuilder: (_) {
        return SmartRefresher(
          controller: controller.refreshController,
          // 下拉刷新
          enablePullDown: true,
          header: const RefreshHeader(),
          onRefresh: controller.onRefresh,
          // 加载更多
          enablePullUp: true,
          footer: const RefreshFooter(),
          onLoading: controller.onLoadMore,
          child: CustomScrollView(
            slivers: [
              _buildMainList(),
            ],
          ),
        );
      },
    );
  }

  _buildMainList() {
    return SliverPadding(
      padding: EdgeInsets.symmetric(horizontal: 12),
      sliver: SliverGrid.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8,
          mainAxisSpacing: 14,
          mainAxisExtent: 206.w,
        ),
        itemBuilder: (_, index) {
          var model = state.mainList[index];
          return GestureDetector(
            onTap: () {
              // 跳转视频详情页
              Get.toNamed(DramaRoutes.detail, arguments: {
                'id': model.id,
                'title': model.title,
              });
            },
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Stack(
                  children: [
                    AspectRatio(
                      aspectRatio: 130 / 180,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: LoadImage(model.cover ?? ''),
                      ),
                    ),
                    Positioned(
                      left: 0,
                      bottom: 0,
                      right: 0,
                      child: Container(
                        width: double.infinity,
                        alignment: Alignment.centerRight,
                        padding:
                            EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                        decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.vertical(bottom: Radius.circular(8)),
                          gradient: LinearGradient(
                            colors: [
                              Colors.transparent,
                              Color(0x99000000),
                            ],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          ),
                        ),
                        child: Text(
                          '全${model.allEp}集',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                          ),
                          maxLines: 1,
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 6),
                Text(
                  model.title ?? '',
                  style: TextStyle(
                    color: Color(0xFF333333),
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                  maxLines: 1,
                ),
              ],
            ),
          );
        },
        itemCount: state.mainList.length,
      ),
    );
  }
}
